<template>
  <div class="site-action-filter">
    <div style="margin-top: 20px">
      <el-input
        clearable
        :value="keyword"
        @input="$emit('update:keyword', $event)"
      ></el-input>
    </div>
    <div style="margin-top: 20px">
      <el-date-picker
        type="datetimerange"
        @input="$emit('update:timeRange', $event)"
        :value="timeRange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      >
      </el-date-picker>
    </div>
    <div
      style="
        margin-top: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px 0;
      "
    >
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <el-checkbox-group
        @change="handleCheckedChange"
        :value="actionSelected"
        @input="$emit('update:actionSelected', $event)"
      >
        <el-checkbox
          v-for="item in actionSelects"
          :label="item[0]"
          :key="item[0]"
          >{{ item[1] }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import { actionMap } from "./SiteAction";

export default {
  name: "SiteActionFilter",
  props: {
    keyword: String,
    timeRange: Array,
    actionSelected: Array,
  },
  data() {
    const pickHandler =
      (time = 1000 * 60) =>
      (picker) => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - time);
        picker.$emit("pick", [start, end]);
      };

    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近1分钟",
            onClick: pickHandler(),
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      actionSelects: [],
      isIndeterminate: true,
      checkAll: false,
    };
  },
  methods: {
    handleCheckAllChange(val) {
      // this.actionSelects = val ? actionSelects : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.actionSelects.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.actionSelects.length;
    },
  },
  created() {
    Object.entries(actionMap).forEach((item) =>
      this.actionSelects.push([item[0], item[1].text])
    );
  },
};
</script>

<style scoped>
.site-action-filter {
  width: 100%;
}
.el-checkbox {
  margin: 10px 20px 10px 12px;
  color: #aaa;
}

.el-checkbox-group {
  width: 100%;
}
</style>
